<#assign ctx=request.contextPath />
<#import '${ctx}/sys/include/head.html' as d/>
<#import '${ctx}/sys/include/body.html' as c/>
<#import '${ctx}/sys/include/table/toolbar.html' as t/>
<!DOCTYPE html>
<html>
<head>
<@d.head title="数据源列表" />
<style type="text/css">
.bg-white {
	background-color: #ffffff;
}
.query-item {
  max-width: 150px;
  white-space:nowrap;/* 规定文本是否折行 */
  overflow: hidden;/* 规定超出内容宽度的元素隐藏 */
  text-overflow: ellipsis;
  display: inline-block;
  padding-right: 10px;
}
.search-item-dt {
	display: inline;
}
.search-item-dd {
word-break: break-word;
	display: inline;
}
.search-item-dl {
	display: inline-block;
    max-height: 115px !important;
    line-height: 2em;
    word-break: break-word;
    /* overflow: hidden; */
    margin-bottom: 0;
    border-bottom-color:rgb(52, 55, 65);
}
.layui-colla-title {
	position: relative;
    height: auto;
    line-height: 42px;
    padding: 0 15px 0 35px;
    color: #333;
    background-color: #ffffff;
    cursor: pointer;
    font-size: 14px;
    overflow: hidden;
    max-height: 115px;
}
.layui-colla-item {
	margin-bottom: 3px;
}
.layui-layer-tips .layui-layer-content {
	color: #333 !important;
	background-color: #ece3e3  !important;
}
.layui-layer-tips i.layui-layer-TipsB, .layui-layer-tips i.layui-layer-TipsT {
    border-right-color: #ece3e3  !important;
}
.query-btn {
    padding: 0 10px;
    font-size: 12px;

}
.close-query {
	margin-left: -4px !important;
	position: absolute;
    color: #555;
    cursor: pointer;
    background-color:transparent;
}
.layui-layer-tips .layui-layer-content {
	box-shadow: 7px 7px 3px rgba(0,0,0,.2) !important;
}
</style>
</head>
<@c.body>
<div class="container" style="margin-top:35px;">
	<div class="layui-form">
		<div class="layui-form-item">
		<label class="layui-form-label">选择数据源</label>
		<div class="layui-input-block">
			<div id="search_area_path">
				<input type="text" placeholder="点击选择" autocomplete="off" name="path"
				class="layui-input" readonly="readonly">
				<input id="dsId" type="hidden" />
			</div>
		</div>
		</div>
		<div class="layui-form-item" name="search_frame">
		<label class="layui-form-label">查询条件</label>
		<div class="layui-input-block" id="query_area">
			<div class="layui-btn" id="add_query">
				添加条件
			</div>
			<div class="layui-btn" id="search_btn">
				查询
			</div>
		</div>
		</div>
		<div class="layui-form-item" name="search_detail" style="text-align:center">
			<span>命中283条</span>
		</div>
	</div>
	<div class="container" name="search_frame" style="margin-top:15px;">
		<div class="layui-collapse">

		</div>
	</div>
</div>
</@c.body>
<script type="text/javascript">
layui.extend({
	xmSelect: 'xm-select'
}).use(['element','form','jquery','appJs','layer','xmSelect'],function(){
	var element = layui.element;
	var $ = layui.$;
	var app = layui.appJs;
	var layer = layui.layer;
	var form = layui.form;
	var xmSelect = layui.xmSelect;
	$("[name='search_frame']").hide();
	$("div[name='search_detail']>span").hide();
	$("input[name='path']").unbind('click');
	$("input[name='path']").bind('click',function(){
		var $holder = $(this);
		var index = layer.open({
			 type:2,
			 title:'请选择',
			 maxmin :true,
			 content:['${ctx}/biz/c/p/ds-select-table'],
			 area:['70%','70%'],
			 success:function(layero,index){
				 var iframeWin = window[layero.find('iframe')[0]['name']];
				 $(iframeWin.document).find("#parent_name").val("path");
				 $(iframeWin.document).find("#check_btn").bind('click',function(){
						var checkStatus = iframeWin.layui.table.checkStatus('search_table');
						var index = layer.getFrameIndex(iframeWin.name); //获取窗口索引
						if(checkStatus.data.length == 1) {
							var data = checkStatus.data[0];
							var show = [];
							for(var v in data) {
								show.push(data[v])
							}
							$holder.val(data['name']);
							$holder.next().val(data['id']);
						}
						$("[name='search_frame']").show();
					    layer.close(index);
					});
			 },
			 end:function(){
				//bindSearch();
			 }
		});
		layer.iframeAuto(index)
	});

	let query_div = '<div id="field_select" class="xm-select-demo" style="width:380px;margin-bottom:3px;"></div>'+
					'<div class="layui-form">'+
						'<div class="layui-inline" style="width:90px;">'+
							'<select>'+
							'<option value="=">等于</option>'+
							'<option value=":">包含</option>'+
							'<option value=">">大于</option>'+
							'<option value="<">小于</option>'+
							'</select>'+
						'</div>'+
						'<div class="layui-input-inline" style="width:280px;margin-left: 12px;margin-right: 5px;position: initial;">'+
							'<input name="query_value" type="text" class="layui-input"></input>'+
						'</div>'+
						'<div class="layui-btn-group layui-input-inline"><a class="layui-btn layui-btn-primary query-btn" id="query_confirm"><i class="layui-icon">&#xe654;</i></a></div>'+
					'</div>';
	$("#add_query").unbind('click');
	$("#add_query").bind('click',function(){
		layer.open({
			type:4,
			content:[query_div,'#add_query'],
			shade: 0,
			tips:3,
			skin: 'demo-class',
			area:['480px','100px']
		});
		var field_select = xmSelect.render({
		    el: '#field_select',
		    radio: true,
			clickClose: true,
			filterable: true,
			remoteSearch: true,
			remoteMethod: function(val, cb, show){
				//这里引入了一个第三方插件axios, 相当于$.ajax
				$.get('${ctx}/biz/data/ds/fields',{id: $("#dsId").val(),key:val},function(data){
					try{
						var res = data.values;
						cb(res.data)
					}catch(err){
						cb([]);
					}
				});
			},
			model: {
				label: {
					type: 'text',
					text: {
						left: '',
						right: '',
						separator: ', ',
					},
				}
			},
		    data: [
		        {name: '张三', value: 1},
		        {name: '李四', value: 2},
		        {name: '王五', value: 3},
		    ]
		});
		$("#query_confirm").unbind('click');
		$("#query_confirm").bind('click',function(){
			let field_name = field_select.getValue("name");
			let op = $(this).parent().parent().find("div>select>option:selected").val();
			let value = $(this).parent().parent().find("input[name='query_value']").val();
			addQuery(field_name,op,value);
			queryItemAction();
			layer.msg(field_name+op+value);
		});
		form.render('select');
	});

	$("#search_btn").unbind('click');
	$("#search_btn").bind('click',function(){
		let query = buildQueryParam();
		app.ajax("post","${ctx}/biz/discover/search",{query:JSON.stringify(query)},function(data){
			if(data.code == 0) {
				clearItems();
				console.log(data.values.data);
				for(item of data.values.data) {
					let it = buildItem(item);
					appendItem(it);
				}
				element.render('collapse');
				$("div[name='search_detail']>span").show();
				$("div[name='search_detail']>span").html("总共命中: "+data.values.total+' 条');
			}else {
				layer.msg("ERROR:"+data.msg);
			}
		});
	});

	function appendItem(item) {
		$(".layui-collapse").append(item);
	}
	function clearItems() {
		$(".layui-collapse").html("");
	}
	function buildItem(item) {
		let div = $("<div class='layui-colla-item bg-white'><div class='layui-colla-title bg-white'></div><div class='layui-colla-content'>xxxx</div></div>")
		let dl = $("<dl class='search-item-dl'></dl>")
		for(i in item) {
			console.log(item[i])
			let dt = $("<dt class='search-item-dt'></dt>");
			dt.html(i+":");
			dl.append(dt);
			let dd = $("<dd class='search-item-dd'><span></span></dd>");
			dd.find("span").html(JSON.stringify(item[i]));
			dl.append(dd);
			dl.append("<dd class='search-item-dd'>&nbsp;&nbsp;&nbsp;</dd>");
		}
		div.find(".layui-colla-title").append(dl);
		div.find(".layui-colla-content").html('<pre>'+JSON.stringify(item, null, 2)+"</pre>");
		return div;
	}

	function addQuery(field,op,value) {
		let q = $('<div class="layui-btn layui-btn-radius layui-btn-primary" style="cursor: auto;"></div>');
		let hidden = $("<div name='query_cmd' stype='display:hidden'></div>");
		hidden.attr("field",field);
		hidden.attr("op",op);
		hidden.attr("value",value);
		q.append($("<div class='query-item'></div>").html(field+op+value));
		q.append($('<span class="layui-badge-dot close-query">X</span>'));
		q.append(hidden);
		$("#query_area").prepend(q);
		$("#query_area");
	}

	function buildQueryParam() {
		let param = {};
		param.datasource = $("#dsId").val();
		let item = $("div[name='query_cmd']");
		for(let i of item) {
			let f = $(i).attr("field");
			let o = $(i).attr("op");
			let v = $(i).attr("value");
			let pack = {field:f,op:o,value:v};
			if(!param.must) {
				param.must = [];
			}
			param.must.push(pack);
		}
		return param;
	}

	function queryItemAction() {
		$(".close-query").unbind('click');
		$(".close-query").bind('click',function(){
			$(this).parent().remove();
		});
		$(".query-item").unbind('mouseenter').unbind('mouseleave');
		$(".query-item").bind('mouseenter',function(){
			let l = layer.tips($(this).html(),this,{tips:3});
			$(this).data('index',l);
		}).bind('mouseleave',function(){
			layer.close($(this).data('index'));
		});
	}
});

</script>
